
<template>
    <div >
       <div class="header-box">
            <div class="header-logo">
                <a href="javascript:" title="长江师范学院"><img src="/img/logo.png"/></a>
            </div>
            <div class="header-title">
                <span>长江师范学院大学生创新创业计划训练平台</span>
            </div>
            <!-- <div class="header-msg">
                <b>
                    <a href="#">一大波文件等待您的审批</a>
                </b>
            </div> -->
            <div class="header-ul">
                <ul class="header-ul-nav ">
                    <li class="header-ul-nav-item">
                        <div class="user">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                <img :src="user.imgUrl" 
                                style="width:30px;height:30px;vertical-align: middle;border-radius:50%">
                                {{user.cname}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" style="margin-top:-1px">
                                    <el-dropdown-item @click.native="changeRouter">个人资料</el-dropdown-item>
                                    <el-dropdown-item>修改密码</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>                     
                        </div>
                    </li>
                    <li class="header-ul-nav-item">
                        <b>
                          <a @click="dialogVisible"  class="layer" data-method="link">退出</a>
                        </b>
                    </li>
                <span style="left: 0px; top: 43px; width: 0px; opacity: 0;"></span></ul>
            </div>
       </div><!-- head结束 -->
        
        <!-- 侧边导航 -->
        <div class="nav-side" style="">
            <el-row class="tac" >
                <el-col :span="24">
                    <el-menu
                    :default-active='defaultActive'
                    class="el-menu-vertical"
                    active-text-color="#e95b3a"
                    router
                    @open="handleOpen"
                    @close="handleClose"
                    >
                    <template v-for="currentresource in currentresource" >
                        <el-submenu :index="currentresource.url" :key="currentresource.url">
                            <template slot="title">
                            <i :class="currentresource.style"></i>
                            <span>{{currentresource.cname}}</span>
                            </template>
                            <el-menu-item 
                                style="padding-left:50px"
                                v-for="list in currentresource.children" 
                                :key="list.url" 
                                :index="list.url"
                                @click='dispatch(list.url)'
                                >{{list.cname}}</el-menu-item> 
                        </el-submenu>
                    </template>
                    </el-menu>
                </el-col>
            </el-row>
         </div><!--侧边栏结束 -->

        <div>
            <router-view class="body"></router-view>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import axios from 'axios'

  export default {
    created(){
        this.setdefaultActive()
        this.$store.dispatch('getUserInfo')
        this.$store.dispatch('getCurrentResource')
        // console.log(this.code)
    },
    data() {
      return {
        data:{
            page:1,
            size:15
        }
      };
    },
    methods: {
      handleOpen(){
        // console.log('aaaaaaa')
      },
      handleClose(){
        // console.log('bbbbbb')
      },
      //退出按钮
      dialogVisible(){
        this.$store.commit('delToken')
        this.$router.push('/')
      },
      changeRouter(){
        this.$router.push('/user/index')
        this.$store.commit('setDefaultActive','/user/index')
      },
      dispatch(url){
        this.$store.commit('setDefaultActive',url)
        switch(url){
            //获取最新比赛
            case '/user/competition/addCompetition': 
                this.$store.dispatch('getAllCompetition',this.data)
                break;
            //获取我的比赛
            case '/user/project/getProject':
                this.$store.dispatch('getProject',this.data)
                break;
        }
      },
      setdefaultActive(){
          if(sessionStorage.defaultActive){
            this.$store.commit('setDefaultActive',sessionStorage.defaultActive)
            this.dispatch(sessionStorage.defaultActive)
          }else{
            this.$store.commit('setDefaultActive','/user/competition/addCompetition')
            this.$router.push('/user/competition/addCompetition')
            this.$store.dispatch('getAllCompetition',this.data)
          }
      }
    },
    computed:{
    ...mapState({
      'currentresource': (state) => state.currentresource,
      'user': (state) => state.user,
      'defaultActive': (state) => state.defaultActive
    })
  }
  }
</script>

<style lang="stylus">
.header-box{
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
    border-bottom: 1px solid #ff934d
    z-index 2
    background-color #ffffff

}
.header-logo{
    float: left;
}
.header-title{
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
    display: inline-block;
}
.el-menu{
    border-right:none
}
.header-ul{
    float: right;
}
.header-ul-nav{
    float: left;
    height: 50px;
}
.header-ul-nav-item{
    display:block;
    width: 100px;
    line-height: 50px;
    float: left;
    a{
        font-size 13px
        display:block;
        height 50px
        width: 100px;
        text-align center
       
    }
    a:hover{
        background-color #f4f4f4
        color #e95b3a
        cursor:pointer
    }
}

.header-msg{ 
    position absolute;
    top 0
    left 25%
}
.header-msg b{
    background: #f1f1f1 url(../../../public/img/header_news.png) no-repeat 15px center;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    box-sizing: border-box;
    display: block;
    float: left;
    font-size: 13px;
    height: 32px;
    line-height: 30px;
    margin: 8px 0 0 80px;
    padding: 0 15px 0 44px;
    width: 460px;
    a:link {color: #777777;text-decoration:none;}
    a:visited {color: #777777}
    a:hover {color: #e95b3a}
    }
.nav-side{
    position fixed
    // top 51px
    width 170px
    height 100%
    border-right: solid 1px #e6e6e6
}
.tac{
    margin-top 51px
}
.el-dropdown-menu__item:not(.is-disabled):hover{
    color #e95b3a
}
.el-submenu .el-menu-item{
    min-width 170px
}
.body{
    position absolute
    top 50px
    left 170px
    width calc(100% - 200px)
    // border solid 15px #fff
    // border solid 20px #fff
    // box-shadow: 0px 0px 0px 20px #ededed;
}
</style>